<template>
    <div class="headerbox">
        <div class="topcont">
            <div class="logobox">
              <img class="logoimg" src="../../assets/images/common/logo.png">
              <h3 class="title">青海省肿瘤医院</h3>
            </div>
            <div class="setopt f-right">
              <a class="icon-set" @click="VersionHandler"></a>
            </div>
            <div class="toptime">{{nowtimeyear}}</div>
        </div>

        <!--密码输入框-->
        <div class="password" v-if="IsShowPassword">
          <div class="Ptitle">
            <span>请输入密码</span>
            <img src="../../../static/images/version/quitBtn.png" alt="请稍等" @click="quit">
          </div>
          <div class="concealP">
            <div class="warp">
              <span class="diamonds" :class="{'active':passwordAll[0]}"></span>
              <span class="diamonds" :class="{'active':passwordAll[1]}"></span>
              <span class="diamonds" :class="{'active':passwordAll[2]}"></span>
              <span class="diamonds" :class="{'active':passwordAll[3]}"></span>
            </div>
            <div class="wrongPassword" v-if="wrongP">
              <span>您的密码输入错误</span>
            </div>
          </div>
          <div class="keyboard">
            <span v-for="(item, index) in numKey"
              :key="index"
              @click="handlerNum(item, index)"
              :class="{'btnOpacity': nowIndex === index}"
            >
              <button class="btn" v-if="typeof item === 'number'">
                {{item}}
              </button>
              <img :src="item" alt="请等待" class="clearNum" v-else>
            </span>
          </div>
        </div>
        <div class="maskLayer" v-if="IsShowPassword"></div>
    </div>
</template>

<script>
// import urls from '../../common.js'
import Bus from '../../../bus.js'
import { mapState } from 'vuex'
export default {
  name: 'indexheader',
  data () {
    return {
      nowTime: '2014年9月11日',
      IsShowPassword: false,
      numKey: [1, 2, 3, 4, 5, 6, 7, 8, 9, '../../../static/images/index/clearAll.png', 0, '../../../static/images/index/clearOne.png'],
      passwordAll: [],
      wrongP: '',
      nowIndex: '',
      rightpwd: '1234',
      nowtimeyear: '',
      timer: ''
    }
  },
  created () {
    this.dateTimes()
    window.timer = setInterval(() => { // 一分钟调一次接口
      this.dateTimes()
    }, 60000)
  },
  mounted () {
  },
  methods: {
    // nowTimes () {
    //   this.timeFormate(new Date())
    //   setInterval(this.nowTimes, 1000)
    //   this.clear()
    // },
    dateTimes () {
      let date = this.toLocaleString()
      date.then(function (datas) {
        let data = new Date(datas.body)
        this.dateObj.year = data.getFullYear()
        this.dateObj.month = this.addZero(data.getMonth() + 1)
        this.dateObj.day = this.addZero(data.getDate())
        this.dateObj.hours = this.addZero(data.getHours())
        this.dateObj.minutes = this.addZero(data.getMinutes())
        this.dateObj.seconds = this.addZero(data.getSeconds())
        this.nowtimeyear = this.dateObj.year + '年' + this.dateObj.month + '月' + this.dateObj.day + '日' + ' ' + this.dateObj.hours + ':' + this.dateObj.minutes
      })
    },
    clear () {
      clearInterval(this.nowTimes)
      this.nowTimes = null
    },
    VersionHandler () {
      // Bus.$emit('ScrollHandler', this.scroll)
      // this.$router.push('/version')
      this.IsShowPassword = true
    },
    submitPassword (password, num) {
      // console.log(this.passwordAll)
      clearInterval(window.timer)
    },
    CommonsubmitPassword (password, number) {
      // console.log(this.passwordAll)
      let pwdString = ''
      pwdString = this.passwordAll.join('')
      if (pwdString === this.rightpwd) {
        Bus.$emit('ScrollHandler', this.scroll)
        this.$router.push('/version')
        this.IsShowPassword = false
        this.passwordAll = []
        clearInterval(window.timer)
      } else {
        this.wrongP = true
        this.passwordAll = []
      }
    },
    handlerNum (num, index) {
      this.nowIndex = index
      this.wrongP = false
      if (typeof num === 'number') { // 按键是否是数字
        this.passwordAll.push(num.toString())
        let passLen = this.passwordAll.length
        let passStr = ''
        if (passLen === 4) { // 密码长度够了就去验证是否正确
          for (let i = 0; i < passLen; i++) {
            passStr += this.passwordAll[i]
          }
          if (this.phonePassword === 2) {
            this.submitPassword({
              // bed_no: localStorage.getItem('WardBedNum'),
              password: passStr
            })
          } else {
            this.CommonsubmitPassword(passStr)
          }
          this.nowIndex = ''
        }
      } else { // 按钮是字符串处理
        if (num.indexOf('All') === -1) {
          this.passwordAll.pop()
        } else {
          this.passwordAll = []
        }
      }
    },
    quit () {
      this.passwordAll = []
      this.nowIndex = ''
      this.wrongP = false
      this.IsShowPassword = false
    }
  },
  computed: {
    ...mapState({
      scroll: 'scroll'
    })
  }
}
</script>

<style lang="stylus" scoped>
    .headerbox
        .topcont
            text-align: left ;
            .logobox
                display: inline-block;
                text-align: left;
                .logoimg
                    width: 0.75rem;
                    height: 0.75rem;
                    border-radius: 50%;
                    margin-right: 0.2rem;
                    float: left;
                .title
                    font-size: 0.38rem;
                    display: inline-block;
                    color: #27ae9e;
                    font-weight: bold;
                    line-height: 0.75rem;
            .setopt
                padding: 0.24rem 0;
                margin-left: 0.3rem;
                cursor: pointer;
                .icon-set
                    display: inline-block;
                    width: 0.32rem;
                    height: 0.3rem;
                    background: url("../../../static/images/index/Settings.png") no-repeat;
                    background-size: 100% 100%;
            .toptime
                display: inline-block;
                float: right;
                font-size: 0.32rem;
                line-height: 0.75rem;
                span
                    display: inline-block;
                    margin-left: 0.2rem;
    .password {
      position: absolute;
      width: 4.42rem;
      height: 5.7rem;
      background: #ffffff;
      left: 50%;
      top: 25%;
      // transform: translateX(-50%)
      margin: 0 -2.21rem
      z-index: 101
        .Ptitle {
          position: relative;
          height: .9rem;
          line-height: .9rem;
          color: #1c1c1c;
          font-size: .3rem;
          border-bottom: 1px solid #ebebeb;
          background: #f8f8f8
            span {
              vertical-align: middle
            }
            img {
              position: absolute;
              right: .2rem;
              top: 50%;
              transform: translateY(-50%)
              vertical-align: middle;
            }
        }
        .concealP {
          position: relative
          height: 1.62rem;
          background: #f8f8f8
            .warp {
              position: absolute
              top: 50%
              left: 50%
              border: 2px solid #ebebeb
              border-radius: 5px
              height: .6rem;
              width: 3rem;
              margin: -.3rem  -1.5rem
              display: flex
              justify-content: center
                .diamonds {
                  display: inline-block
                  height: .58rem;
                  width: .75rem;
                  border-left: 1px solid #ebebeb
                  line-height: .65rem;
                }
                :first-child {
                  border-left: 0px solid #ebebeb
                }
                .active:after {
                  content: ''
                  display: inline-block
                  width: 25px
                  height: 25px
                  border-radius: 50%
                  background: #1a1a1a
                }
            }
            .wrongPassword {
              position: absolute
              top: 75%
              left: 50%
              transform: translateX(-50%)
              width: 100%
              color: red
            }
        }
        .keyboard {
          background-color: #d4d8db
          display: flex
          flex-wrap: wrap
          justify-content: space-between
            .btnOpacity {
              .btn {
                background-color:#37c0b0;
              }
          }
          span {
            display: inline-block
            width: 1.46rem
            display: flex
            align-items: center
            justify-content: center
              .btn {
                width: 1.47rem
                height: .8rem
                background: #ffffff
              }
          }
        }

    }
    .maskLayer {
      position: absolute
      width: 100%
      height: 100%
      background: #ccc
      opacity: 0.5
      top: 0
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
    }
</style>
